import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { CmdbContent, CmdbHeader } from '@/components';
import AcceptanceStatusBar from '../Form/AcceptanceStatusBar';
import BasicArea from './Area/BasicArea';
import ResourceArea from './Area/ResourceArea';
import DeviceArea from './Area/DeviceArea';
import OperationLogArea from './Area/OperationLogArea';
import { useAcceptanceDetail } from '../Form/hooks';

/**
 * 验收资料详情
 */
function ResourceAcceptanceDetail() {
    const history = useHistory();
    const { search } = useLocation();

    const searchParams = new URLSearchParams(search);
    const id = searchParams.get('id');

    const acceptanceDetail = useAcceptanceDetail({ manual: false, defaultParams: [id] });

    const renderContent = () => {
        return [AcceptanceStatusBar, BasicArea, ResourceArea, DeviceArea, OperationLogArea].map((Comp, index) => (
            <Comp key={index} id={id} data={acceptanceDetail.data} />
        ));
    };

    return (
        <CmdbContent>
            <CmdbHeader title="查看验收状态" showBackButton history={history} goBackUrl="/resource/acceptance" />
            {renderContent()}
        </CmdbContent>
    );
}

export default ResourceAcceptanceDetail;
